import React, {PropTypes} from 'react';
import {
    Container,
    List,
    NavBar,
    Group,
    View,
    OffCanvas,
    OffCanvasTrigger,
    Slider,
    Grid,
    Col,
    Badge, PopoverTrigger, Popover, Field
} from 'amazeui-touch';
import {connect} from 'react-redux';
import Action from '../store/actions';
import {bindActionCreators} from 'redux';
import {goods, kind, kindList} from '../util'

@connect(
    state => ({...state}),
    dispatch => bindActionCreators(Action, dispatch)
)
export default class Index extends React.Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        this.props.getHomeList(1, 3);
        this.props.getMenuList(1, 6);
    };

    render() {
        var withOffCanvas = {
            leftNav: [{
                icon: 'list',
                component: OffCanvasTrigger,
                isClone: true,
                offCanvas: <OffCanvas ref="oct">
                    <div>
                        <h3 className="margin">商品分类</h3>
                        <List>
                            {kindList(this.props.home.menu.menuInfo.menuList)}
                        </List>
                    </div>
                </OffCanvas>
            }],
            rightNav: [{
                icon: 'search',
                component: PopoverTrigger,
                isClone: true,
                popover: <Popover>
                    <Field placeholder="请输入关键字"/>
                </Popover>
            }]
        };

        const sliderIntance = (
            <Slider>
                <Slider.Item>
                    <img src="http://10.0.1.24:8080/pic/bing1.jpg"/>
                </Slider.Item>
                <Slider.Item>
                    <img src="http://10.0.1.24:8080/pic/bing2.jpg"/>
                </Slider.Item>
                <Slider.Item>
                    <img src="http://10.0.1.24:8080/pic/bing3.jpg"/>
                </Slider.Item>
                <Slider.Item>
                    <img src="http://10.0.1.24:8080/pic/bing4.jpg"/>
                </Slider.Item>
            </Slider>
        );
        return (
            <View>
                <NavBar
                    {...withOffCanvas}
                    amStyle="primary"
                    title="XX商场"
                />
                <Container scrollable>
                    <div className="container">
                        <div className="homeSlider">
                            <Group
                                noPadded
                            >
                                {sliderIntance}
                            </Group>
                        </div>
                        <div id="frame">
                            <div className="with-line">*今日必点*</div>
                        </div>
                        <div className="homeGuider">
                            <Grid avg={4}>
                                <Col>
                                    <Grid
                                        wrap="wrap"
                                    >
                                        <Col><Badge
                                            amStyle='success'
                                            rounded
                                        >
                                        </Badge></Col>
                                        <Col>今日推荐</Col>
                                    </Grid>
                                </Col>
                                <Col>
                                    <Grid
                                        wrap="wrap"
                                    >
                                        <Col><Badge
                                            amStyle='secondary'
                                            rounded
                                        >
                                        </Badge></Col>
                                        <Col>看看星榜</Col>
                                    </Grid>
                                </Col>
                                <Col>
                                    <Grid
                                        wrap="wrap"
                                    >
                                        <Col><Badge
                                            amStyle='warning'
                                            rounded
                                        >
                                        </Badge></Col>
                                        <Col>今日特价</Col>
                                    </Grid>
                                </Col>
                                <Col>
                                    <Grid
                                        wrap="wrap"
                                    >
                                        <Col><Badge
                                            amStyle='alert'
                                            rounded
                                        >
                                        </Badge></Col>
                                        <Col>每日福利</Col>
                                    </Grid>
                                </Col>
                            </Grid>
                        </div>
                        <div id="frame">
                            <div className="with-line">*热门分类*</div>
                        </div>
                        <div className="recommend">
                            <Grid avg={3}>
                                {kind(this.props.home.menu.menuInfo)}
                            </Grid>
                            <hr/>
                        </div>
                    </div>
                    <div id="frame">
                        <div className="with-line">*今日推荐*</div>
                    </div>
                    <div className="goods">
                        {goods(this.props.home.homeInfo.homeList)}
                    </div>
                </Container>
            </View>
        );
    }
}
